import classNames from 'classnames'
import { IconProp } from '@fortawesome/fontawesome-svg-core'
import {
  ReactElement,
  InputHTMLAttributes,
  ChangeEvent,
  RefObject,
} from 'react'

export const DISPLAY_NAME_INPUT = 'Input'

type InputSize = 'large' | 'small'
// Omit 忽略一个值
export interface InputProps
  extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
  /**是否禁用 */
  disabled?: boolean
  /**设置 input 尺寸 */
  size?: InputSize
  /**添加右侧图标 */
  icon?: IconProp
  /**input框前缀 */
  prepend?: string | ReactElement
  /**input框后缀 */
  append?: string | ReactElement
  /**同原生的ref 将扩展至input节点 用与获取组件dom */
  comRef?: RefObject<HTMLInputElement>
  onChange?: (e: ChangeEvent<HTMLInputElement>) => void
}

// 获取组件配置的class
export const getInputClassNames = (
  props: InputProps,
  extendClass?: () => Object
) => {
  const { size, disabled, className, prepend, append } = props
  return classNames(
    'input-wrapper',
    className,
    {
      [`input-size-${size}`]: !!size,
      'input-group': prepend || append,
      // 'input-group-append': !!append,
      // 'input-group-prepend': !!prepend,
      disabled: disabled,
    },
    extendClass && extendClass()
  )
}
